<template>
	<view class="store">
		<StatusBar></StatusBar>
		<view class="store-head">
			<view class="store-head-searchInput flex f-a-center">
				<view class="store-head-searchInput-back" @tap="back()"><arrow color="#000000" size="48"></arrow></view>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_search" class="store-head-searchInput-input flex f-a-center f-j-center">
					<icon class="store-head-searchInput-input-icon" type="search" size="16" color="#666666"></icon>
					<!-- <input type="text" placeholder="项链手链耳环" placeholder-style="color:#ffffff" /> -->
					<view class="store-head-searchInput-input-text">项链手链耳环</view>
				</navigator>
				<!-- <image src="../../../static/icons/jewel/material/m_sanCode.png" class="store-head-searchInput-code" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 轮播图 -->
		<view :style="{'margin-bottom':banner.length < 1?'0':'20rpx'}" >
			<swiper class="banner-slide" autoplay circular @change="toggleDot">
				<swiper-item v-for="(v, k) in banner" :key="k">
					<view @tap="navTo(v.url)">
						<image :src="v.thumb" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="g-banner-dots" v-if="banner.length < 1">
			<view v-for="(item, index) in banner" :class="[nDot == index ? 'act' : '']" :key="index"></view>
		</view>
		
		<view class="store-recommend" v-if="hotList.length>0">
			<view class="store-recommend-title flex f-a-center"><image src="../../../static/icons/jewel/material/m_hot.png" class="store-recommend-title-icon"></image>热销单品</view>
			<!-- <scroll-view class="store-recommend-list">
				<view class="store-recommend-list-item">
					<image class="store-recommend-list-item-pic"></image>
					<view class="store-recommend-list-item-name">925纯银紫水晶手链</view>
					<view class="store-recommend-list-item-price">￥999.00</view>
					<view class="store-recommend-list-item-seller">已售5</view>
				</view>
			</scroll-view> -->
			<swiper class="store-recommend-slide" display-multiple-items="4">
				<swiper-item v-for="(item, index) in hotList" :key="index">
					<navigator open-type="navigate" hover-class="none" :url="'/pages/goods/good_view?goods_id='+item.goods_id" class="store-recommend-slide-item">
						<image class="store-recommend-slide-item-pic" :src="item.thumb" mode="aspectFill"></image>
						<view class="store-recommend-slide-item-name f-one-ellipsis">{{item.goods_name}}</view>
						<view class="store-recommend-slide-item-price">¥{{item.shop_price}}</view>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="store-goods">
			<scroll-view class="store-goods-nav" scroll-x :scroll-left="scrollX" :scroll-with-animation="true">
				<view class="store-goods-nav-item" :class="[navIndex == 0 ? 'red' : '']" @tap="navTap(0,0)">推荐</view>
				<view class="store-goods-nav-item" :class="{red:navIndex == index}" @tap="navTap(index,nav.id)" v-for="(nav,index) in cateList" :key="index">{{nav.name}}</view>
			</scroll-view>
			<!-- <scroll-view class="g-classify" scroll-x :scroll-left="scrollX" :scroll-with-animation="true">
			    <text data-index="0" :class="[0 == navIndex ? 'act' : '']" @tap="toggleClassify" data-id="none">全部</text>
			    <text v-for="(item,index) in cateList" :key="index" :class="[index+1 == navIndex ? 'act' : '']"
			        @tap="toggleClassify" :data-id="item.id" :data-index="index+1">{{item.name}}</text>
			</scroll-view> -->
			<view class="store-goods-list">
				<navigator open-type="navigate" hover-class="none" :url="'/pages/jewel/goods/show?goods_id='+goods.goods_id" class="store-goods-list-item flex" v-for="(goods,index) in goodsList" :key="index">
					<image class="store-goods-list-item-pic" :src="goods.thumb"></image>
					<view class="store-goods-list-item-info">
						<view class="store-goods-list-item-info-name">{{goods.goods_name}}</view>
						<view class="store-goods-list-item-info-ename">{{goods.category}}</view>
						<view class="store-goods-list-item-info-price flex f-a-center">
							<view class="store-goods-list-item-info-price-num">¥{{goods.shop_price}}</view>
							<view class="store-goods-list-item-info-price-seller">已售{{goods.sales_sum}}</view>
						</view>
						<view class="store-goods-list-item-info-other">
							<text>{{goods.show_return_title}}</text>
						</view>
					</view>
				</navigator>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
		
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				hotList:[],
				goodsList:[],
				cateList:[],
				loadMoreStatus:1,
				page:1,
				total_pages:1,
				navIndex:0,
				scrollX: 0,
				scrollWidth:0,
				currentId:0,
				banner:[],
				nDot:0
			};
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			navTo(url){
				uni.navigateTo({
					url:'/pages/common/article?url='+ url
				})
			},
			navTap(index,id) { // 切换分类
				let that = this
			    let offset = (index - 2) * (that.scrollWidth / 5);
			    that.navIndex = index;
				that.currentId = id
			    that.scrollX = offset;
			    that.page = that.total_pages = 1;
				that.goodsList = []
			    that.getData();
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 0
			    });
			},
			getHot(){
				let that = this
				jewel.post('goods/searchGoods',{franchise_price:1,is_hot:1}, true, function(res){
					that.hotList = res.data.data
				})
				jewel.post('goods/getGoodsCategory',{is_seller:1}, true, function(res){
					that.cateList = res.data.data
				})
				jewel.get('app/getdiankeAd',{}, false, function(res){
					that.banner = res.data.data
				})
			},
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.total_pages == 0 || !that.total_pages) that.total_pages = 1
				if(that.page <= that.total_pages){
					jewel.post('goods/searchGoods',{page:that.page,franchise_price:1,cate_id:that.currentId},true,function(res){
						if(type == 'loadMore'){
							that.goodsList = that.goodsList.concat(res.data.data)
						}else{
							that.goodsList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages == 1 || !that.total_pages?2:0
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
			},
			toggleDot(e) {
			    this.nDot = e.detail.current;
			},
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
			    success(res) {
			        that.scrollWidth = res.screenWidth;
			    }
			});
			that.getHot()
			that.getData()
		},
		
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #f1f1f1;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.store-head{
		padding: 8rpx 24rpx;
		background-color: #FFFFFF;
		&-searchInput{
			font-size: 28rpx;
			position: relative;
			justify-content: flex-end;
			&-back{
				position: absolute;
				z-index: 10;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			&-code{
				width: 46rpx;
				height: 46rpx;
				display: block;
			}
			&-input{
				width: 650rpx;
				height: 62rpx;
				background-color: #efefef;
				border-radius: 50px;
				color: #666666;
				text-align: center;
				&-icon{
					margin: 0 17rpx;
				}
				&-text{
					color: #666666;
				}
			}
		}
		
	}
	.store-recommend{
		padding-bottom: 20rpx;
		margin-bottom: 16rpx;
		&-title{
			font-size: 32rpx;
			color: #333333;
			padding-left: 30rpx;
			line-height: 68rpx;
			position: relative;
			&-icon{
				width: 22rpx;
				height: 27rpx;
				display: block;
				margin-right: 16rpx;
			}
		}
		&-slide{
			position: relative;
			height: 260rpx;
			&-item{
				background-color: #FFFFFF;
				margin: 0 3.5rpx;
				overflow: hidden;
				border-radius: 6rpx 6rpx 0 0;
				text-align: center;
				&-pic{
					height: 160rpx;
					width: 180rpx;
					display: block;
					border-radius: 5rpx 5rpx 0 0;
					margin-bottom: 26rpx;
				}
				&-name{
					color: #353535;
					font-size: 28rpx;
				}
				&-price{
					color: #f82a33;
					font-size: 26rpx;
				}
			}
		}
	}
	.store-goods{
		&-nav{
			height: 84rpx;
			border-bottom: 1px solid #f5f5f5;
			white-space: nowrap;
			background-color: #FFFFFF;
			&-item{
				line-height: 84rpx;
				color: #333333;
				font-size: 28rpx;
				display: inline-block;
				width: 152rpx;
				text-align: center;
			}
		}
		&-list{
			background-color: #f1f1f1;
			padding-bottom: 1rpx;
			&-item{
				background-color: #FFFFFF;
				margin-bottom: 12rpx;
				padding: 20rpx 30rpx;
				&-pic{
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				&-info{
					flex: 1;
					&-name{
						color: #353535;
						font-size: 34rpx;
					}
					&-ename{
						color: #7f7f7f;
						font-size: 26rpx;
					}
					&-price{
						justify-content: space-between;
						margin-top: 3rpx;
						margin-bottom: 7rpx;
						&-num{
							color: #f92a33;
							font-size: 36rpx;
						}
						&-seller{
							color: #808080;
							font-size: 22rpx;
						}
					}
					&-other{
						text{
							color: #ff4a68;
							font-size: 20rpx;
							border: 1px solid #ffdee4;
							line-height: 25rpx;
							border-radius: 5rpx;
							padding: 0 5rpx;
						}
					}
				}
			}
		}
	}
	.red{
		color: #f92a33;
	}
	
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	}
	
	.banner-slide{
		background: #fff;
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}
	.banner-slide image {
		width: 100%;
		height: 344rpx;
	}
	.g-banner-dots {
		width: 100%;
		height: 43rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.g-banner-dots .act {
	    background: #6e6e6e;
		border-color: #6e6e6e;
	}
	
	.g-banner-dots view {
	    width: 10upx;
	    height: 10upx;
	    border-radius: 100px;
		border: 2rpx solid #c3c3c3;
		margin: 0 10rpx;
	}
	
</style>
